<template>
    <fieldset>
        <legend>子组件</legend>
        <h1>{{props.gift}}</h1>
        <h2>{{gift}}</h2>
        <h1>余额：{{balance}}</h1>
        <button @click="bet">点击下注</button>
    </fieldset>
</template>
<script setup>
// 父传子
// 使用defineProps来声明props属性
import {defineProps,toRefs,ref,defineEmits,defineExpose} from "vue"
// let props = defineProps(['gift'])
let props = defineProps({
    gift:{
        type:String
    }
})

// 解构props中的属性，会消除它的响应性
// let {gift} = props;
// 使用toRefs让属性重新获得响应性
let {gift} = toRefs(props);

console.log(props);

// 子传父的过程
let balance = ref(1000000000)
// 使用defineEmits来声明自定义事件
let emit = defineEmits(['betMoney'])
console.log(emit);
let bet =function(){
    balance.value = balance.value -100000
    // emit('betMoney',10000)
    emit('betMoney',10000)
}

// defineExpose把子组件的属性和方法暴露给父组件
// defineExpose一般暴露方法给父组件，一些静态属性给父组件
defineExpose({
    balance,
    bet,
})


// throw new Error("你的余额不足，请充值")
</script>